<template>
	<view class="container">
		<view class="tabs">
			<view class="tab-item" :class="{ active: activeTab === 'credit' }" @click="switchTab('credit')">
				信誉分规则
			</view>
			<view class="tab-item" :class="{ active: activeTab === 'commission' }" @click="switchTab('commission')">
				佣金及扣费规则
			</view>
		</view>

		<!-- 状态显示 -->
		<view v-if="loading" class="status">
			<text>加载中...</text>
		</view>

		<view v-else-if="error" class="status error">
			<text>加载失败，请稍后重试</text>
			<button @click="loadRules(activeTab)">重试</button>
		</view>

		<!-- 内容区域 -->
		<view v-else class="content">
			<!-- 信誉分规则 -->
			<view v-if="activeTab === 'credit'" class="rule-content">
				<scroll-view scroll-y="true" class="rule-scroll">
					<rich-text :nodes="creditRulesHtml"></rich-text>
				</scroll-view>
			</view>

			<!-- 佣金及扣费规则 -->
			<view v-else-if="activeTab === 'commission'" class="rule-content">
				<scroll-view scroll-y="true" class="rule-scroll">
					<rich-text :nodes="commissionRulesHtml"></rich-text>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
import { request, getFullImageUrl, initBaseUrl } from '../../../utils/request';
import { API_BASE_URL } from '../../../config/apiConfig';

export default {
	data() {
		return {
			activeTab: 'credit', // 默认显示“信誉分规则”
			loading: true, // 加载状态
			error: false, // 错误状态

			// 规则内容
			creditRulesHtml: '',
			commissionRulesHtml: '',

			// 后端API地址
			apiUrls: {
				credit: `/rules/credit`,
				commission: `/rules/commission`
			}
		};
	},

	mounted() {
		// 页面加载时初始化加载信誉分规则
		this.loadRules('credit');
	},

	methods: {
		// 切换选项卡
		switchTab(tab) {
			if (this.activeTab === tab) return;

			this.activeTab = tab;

			// 检查内容是否已加载
			if ((tab === 'credit' && this.creditRulesHtml) ||
				(tab === 'commission' && this.commissionRulesHtml)) {
				return;
			}

			// 加载对应规则
			this.loadRules(tab);
		},

		// 从后端加载规则内容
		loadRules(type) {
			this.loading = true;
			this.error = false;

			// 调用实际API请求
			request({
				url: this.apiUrls[type],
				method: 'GET'
			}).then(res => {
				if (res.code == 1 && res.data) {
					if (type === 'credit') {
						this.creditRulesHtml = res.data;
					} else {
						this.commissionRulesHtml = res.data;
					}
				} else {
					throw new Error('获取数据失败');
				}
				this.loading = false;
			}).catch(err => {
				console.error('加载规则失败:', err);
				this.loading = false;
				this.error = true;
			});
		}
	}
};
</script>

<style lang="scss" scoped>
/* 样式部分保持不变 */
/* 修复内容显示不全的最终样式 */
.container {
	min-height: 100vh;
	background-color: #F2F3F8;
	padding: 20rpx;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	position: relative;
}

.tabs {
	display: flex;
	border-bottom: 1rpx solid #eee;
	flex-shrink: 0;
	margin-bottom: 20rpx;
	background: #FFFFFF;
	border-radius: 26rpx 26rpx 0 0;
	padding: 0 20rpx;

	.tab-item {
		padding: 30rpx 20rpx;
		text-align: center;
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 32rpx;
		color: #888B9A;
		position: relative;
		flex: 1;

		&.active {
			font-family: Source Han Sans CN;
			font-weight: 500;
			font-size: 36rpx;
			color: #0E1C37;
		}

		&.active::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: calc(50% - 34rpx);
			width: 68rpx;
			height: 7rpx;
			background: #BEFF32;
			border-radius: 0rpx 5rpx 5rpx 0rpx;
		}
	}
}

.status {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 30rpx;
	min-height: 200rpx;
	flex-shrink: 0;
	background: #FFFFFF;
	border-radius: 26rpx;
	margin-top: 20rpx;

	text {
		margin-top: 10rpx;
		font-size: 28rpx;
		color: #666;
	}

	button {
		margin-top: 20rpx;
		padding: 10rpx 20rpx;
		background-color: #007aff;
		color: white;
		border-radius: 10rpx;
		font-size: 28rpx;
		border: none;
		outline: none;
		box-shadow: none;
	}
}

.error {
	text {
		color: #f56c6c;
	}
}

.content {
	flex: 1;
	min-height: 0;
	position: relative;
	overflow: hidden;
}

.rule-content {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
}

.rule-scroll {
	flex: 1;
	width: 100%;
	min-height: 500rpx; /* 确保最小高度 */
	background: #FFFFFF;
	border-radius: 26rpx;
	padding: 30rpx;
	box-sizing: border-box;
	overflow: hidden;
}

/* 富文本内部样式 */
rich-text {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: break-word;
	
	::v-deep {
		* {
			max-width: 100%;
			box-sizing: border-box;
		}
	}
	
	view {
		&.section {
			margin-bottom: 30rpx;
			background-color: #fff;
			padding: 20rpx;
			border-radius: 10rpx;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
			box-sizing: border-box;
			max-width: 100%;
		}

		h1, h2, h3, h4, h5, h6 {
			font-weight: bold;
			color: #333;
			margin: 20rpx 0 10rpx 0;
			line-height: 1.4;
			max-width: 100%;
			word-wrap: break-word;
		}

		h3 {
			font-size: 32rpx;
		}

		h4 {
			font-size: 28rpx;
			color: #666;
		}

		p {
			font-size: 28rpx;
			color: #666;
			line-height: 1.8;
			margin: 10rpx 0;
			max-width: 100%;
			word-wrap: break-word;
			word-break: break-word;
		}
		
		ul, ol {
			margin: 15rpx 0;
			padding-left: 40rpx;
			max-width: 100%;
			box-sizing: border-box;
		}
		
		li {
			font-size: 28rpx;
			color: #666;
			line-height: 1.8;
			margin: 8rpx 0;
			max-width: 100%;
			word-wrap: break-word;
		}
		
		img {
			max-width: 100%;
			height: auto;
			display: block;
			margin: 15rpx 0;
			border-radius: 8rpx;
		}
		
		table {
			width: 100%;
			border-collapse: collapse;
			margin: 15rpx 0;
			font-size: 26rpx;
			max-width: 100%;
			overflow-x: auto;
			display: block;
		}
		
		tbody, thead {
			display: table;
			width: 100%;
			table-layout: fixed;
		}
		
		td, th {
			border: 1rpx solid #ddd;
			padding: 12rpx;
			text-align: left;
			box-sizing: border-box;
			word-wrap: break-word;
			word-break: break-word;
			font-size: 26rpx;
		}
		
		strong, b {
			font-weight: bold;
			color: #333;
		}
		
		em, i {
			font-style: italic;
			color: #666;
		}
	}
}
</style>